<template>
	<div>
		<div class="w-full text-right mt-6 pr-6" v-if="!props.flag">
			<div class="mb-1">
				<el-button-group class="mr-2">

					<el-button size="small" :disabled="data.upper" @click="macswitch(1)">
						<template #default>
							<span class="text-sm">{{ $t('machine.up') }}</span>
						</template>
					</el-button>

					<el-button size="small" :disabled="data.lower" @click="macswitch(2)">
						<template #default>
							<span class="text-sm">{{ $t('machine.next') }}</span>
						</template>
					</el-button>

				</el-button-group>
				<div class="mr-2 w-32 inline-block">
					<el-input v-model="data.machine_id" :placeholder="$t('machine.enterMachineCode')" />
				</div>
				<el-button-group>

					<el-button size="small" @click="gmac">
						<template #default>
							<span class="text-sm">{{ $t('machine.go') }}</span>
						</template>
					</el-button>

					<el-button size="small" @click="glist">
						<template #default>
							<span class="text-sm">{{ $t('machine.return') }}</span>
						</template>
					</el-button>

				</el-button-group>
			</div>
		</div>
		<div class="app-container">
			<div class="w-full flex flex-wrap relative">
				<div class="w-1/12 text-center">
					<div class="inline-block">
						<el-image :src="info.pic || machine" class="w-32 h-32" />
					</div>
				</div>
				<div class="w-11/12">
					<div class="w-full flex flex-wrap pl-10">
						<div class="w-1/3">
							<div class="mb-4 truncate">{{ $t('machine.code') }}: <span class="ml-4">{{ info.machine_id || '--' }}</span>
							</div>
							<div class="mb-4 truncate">{{ $t('machine.name') }}:
								<span class="ml-4">
									{{ info.machine_name || '--' }}
								</span>
							</div>
							<div class="mb-4 truncate">{{ $t('machine.offline') }}：
								<el-tag :type="info.online == 1 ? 'success' : 'info'">
									{{ info.online == 1 ? $t('public.onLine') : $t('public.offline') }}
								</el-tag>
							</div>
							<div class="mb-4 truncate" v-if="!props.flag">{{ $t('date.lastOnlineTime') }}：
								<span class="ml-4">{{ level.gettime(info.onlinetime || info.last_online_time || '--', 3) }}</span>
							</div>
						</div>
						<div class="w-1/3">
							<div class="mb-4 truncate">{{ $t('machine.type') }}：<span class="ml-4">
								{{ info.machine_type == 1 ? $t('machine.assignMachine') : $t('machine.allMachin') || '--' }}</span></div>
							<div class="mb-4 truncate">
								{{ $t('machine.machineStatus') }}：
								<el-tag v-if="info.status == 1" type="success">{{ $t('public.normal') }}</el-tag>
								<el-tag v-if="info.status == 2" type="danger">{{ $t('public.disable') }}</el-tag>
								<el-tag v-if="info.status == 3" type="info">{{ $t('public.uphold') }}</el-tag>
							</div>
							<div class="mb-4 truncate" v-if="!props.flag">{{ $t('machine.lang') }}：<span class="ml-4">{{ info.lang || '--' }}</span>
							</div>
							<div class="mb-4 truncate">{{ $t('machine.version') }}：<span class="ml-4">{{ info.version || '--' }}</span></div>
						</div>
						<div class="w-1/3">
							<div class="mb-4 truncate" v-if="!props.flag">{{ $t('machine.currencySymbol') }}：<span class="ml-4">{{ info.currency || '--' }}</span></div>
							<div class="mb-4 truncate" v-if="!props.flag">{{ $t('machine.number') }}：<span class="ml-4">{{ info.machine_serial_number || '--' }}</span></div>
							<div class="mb-4 truncate">{{ $t('machine.location') }}：<span class="ml-4">{{ setAddress(info) }}</span></div>
							<div class="mb-4 truncate" v-if="props.flag">{{ $t('date.lastOnlineTime') }}：<span class="ml-4">{{ level.gettime(info.onlinetime || info.last_online_time || '--', 3) }}</span></div>
							<div class="mb-4 truncate">{{$t('machine.appType')}}：<span class="ml-4">{{ info.device_type == '1' ? $t('machine.vending') : $t('machine.store') || '--' }}</span></div>
						</div>
					</div>
				</div>
				<div class="absolute right-0 text-right" v-if="!props.flag">
					<div class="mb-2">
						<el-button-group>
							<el-button v-prmis="'machine_endMainControl'" size="small" @click="macbtn(1, '休眠设置')">
								<template #default>
									<span class="text-sm">{{ $t('machine.dormancy') }}</span>
								</template>
							</el-button>
							<el-button v-prmis="'machine_endMainControl'" size="small" @click="macbtn(2, '唤醒设置')">
								<template #default>
									<span class="text-sm">{{ $t('machine.awaken') }}</span>
								</template>
							</el-button>
							<el-button v-prmis="'machine_endMainControl'" size="small" @click="macbtn(3, '重启设置')">
								<template #default>
									<span class="text-sm">{{ $t('machine.reboot') }}</span>
								</template>
							</el-button>
							<el-button v-prmis="'machine_endMainControl'" type="danger" size="small"
								@click="macbtn(4, '关机设置')">
								<template #default>
									<span class="text-sm">{{ $t('machine.shutdown') }}</span>
								</template>
							</el-button>
						</el-button-group>
					</div>

					<div class="mb-2">
						<el-button-group>
							<el-button v-prmis="'machine_setVolume'" size="small" @click="macbtn(6, '音量设置')">
								<template #default>
									<span class="text-sm">{{ $t('machine.volume') }}</span>
								</template>
							</el-button>
							<el-button v-prmis="'machine_setLight'" size="small" @click="macbtn(7, '灯光设置')">
								<template #default>
									<span class="text-sm">{{ $t('machine.light') }}</span>
								</template>
							</el-button>
							<el-button v-prmis="'machine_endMainControl'" size="small" @click="macbtn(5, '软件升级')">
								<template #default>
									<span class="text-sm">{{ $t('machine.upgrade') }}</span>
								</template>
							</el-button>
						</el-button-group>
					</div>
				</div>
			</div>
		</div>
		<el-dialog v-model="data.macstatus" :title="$t('machine.settings')" center width="40%">
			<el-form :model="data.machine" :inline="true" label-width="140">

				<el-form-item :label="$t('machine.code') + ':'" prop="machine_id" class="w-10/12">
					<el-input v-model="data.machine.machine_id" :placeholder="$t('message.pleaseEnter')" readonly />
				</el-form-item>

				<el-form-item :label="$t('machine.function') + ':'" prop="machine_id" class="w-10/12">
					<el-input v-model="data.title" :placeholder="$t('message.pleaseEnter')" readonly />
				</el-form-item>

				<el-form-item :label="$t('machine.executionTime') + ':'" prop="machine_id" class="w-10/12">
					<el-select v-model="data.time">
						<el-option :label="$t('machine.executeImmediately')" :value="1" />
						<el-option v-if="data.machine.msgType <= 5" :label="$t('machine.timedExecution')" :value="2" />
					</el-select>
				</el-form-item>

				<el-form-item v-if="data.machine.msgType == 6" :label="$t('machine.mchineVolume') + ':'" prop="machine_id" class="w-10/12">
					<el-slider v-model="data.machine.volume" size="large" :step="10" show-stops />
				</el-form-item>

				<el-form-item v-if="data.machine.msgType == 7" :label="$t('machine.lightBrightness') + ':'" prop="machine_id" class="w-10/12">
					<el-slider v-model="data.machine.light" size="large" :step="10" show-stops />
				</el-form-item>

				<el-form-item v-if="data.time == 2" :label="$t('date.time') + ':'" prop="machine_id" class="w-10/12">
					<el-date-picker v-model="data.machine.time_point" :disabled-date="disabledDate" type="datetime" :placeholder="$t('message.pleaseSelect')" format="YYYY/MM/DD HH:mm:ss" value-format="x" style="width: 100%;" />
				</el-form-item>

				<div class="w-full text-center">
					<div class="inline-block">
						<el-button type="primary" size="small" @click="submit()">
							<template #default>
								<span class="text-sm">{{ $t('public.save') }}</span>
							</template>
						</el-button>

						<el-button size="small" @click="data.macstatus = false">
							<template #default>
								<span class="text-sm">{{ $t('public.cancel') }}</span>
							</template>
						</el-button>
					</div>
				</div>

			</el-form>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
const { t: $t } = useI18n()
import machine from '@/assets/machine.png';
import level from '@/utils/level';
import { getmachineList, setmachineVolume, setmachineLight, sendMainControl } from '@/api/machine';
import { useRouter, useRoute } from "vue-router";
let emit = defineEmits(['onstatus'])
const route = useRoute()
const router = useRouter()
let props = defineProps({
	info: {
		type: Object,
		default: {}
	},
	flag: {
		type: String,
		default: ''
	}
})
let data = reactive({
	macstatus: false, // 弹窗
	title: '', // 标题
	time: 1, // 执行时间
	machine_id: '', // 设备ID
	machine: { // 
		machine_id: '',
		msgType: 0,
		time_point: '',
		volume: props.info.volume,
		light: props.info.light
	},
	list: [], // 设备列表
	num: '', // 当时设备列表位置
	upper: false, // 上一台状态
	lower: false, // 下一台状态
})
let setAddress = (info) => {
	let address = ''
	if (info.country || info.state || info.city) {
		let country_cname = info.country && info.country.code ? info.country.cname : ''
		let country_name = info.country && info.country.code ? `(${(info.country.name)})` : ''
		let state_cname = info.state && info.state.code ? info.state.cname : ''
		let state_name = info.state && info.state.code ? `(${(info.state.name)})` : ''

		let city_cname = info.city && info.city.code ? info.city.cname : ''
		let city_name = info.city && info.city.code ? `(${(info.city.name)})` : ''
		address = country_cname + country_name + state_cname + state_name + city_cname + city_name
	}
	return address ? address : '--'
}

// 限制日期选择
let disabledDate = (time: Date) => {
	return time.getTime() < Date.now()
}

// 功能按钮
let macbtn = (e, k) => {
	data.machine.msgType = e
	data.machine.machine_id = props.info.machine_id
	data.machine.time_point = ''
	data.title = k
	data.time = 1
	data.macstatus = true
}

// 数据提交
let submit = () => {

	if (data.machine.msgType <= 5) {
		// 1. 休眠：sleep, 2. 唤醒：wakeUp, 3. 重启：reboot, 4. 关机：shutdown, 5. 软件升级：update
		let msgType = ''
		if (data.machine.msgType == 1) {
			msgType = 'sleep'
		}
		if (data.machine.msgType == 2) {
			msgType = 'wakeUp'
		}
		if (data.machine.msgType == 3) {
			msgType = 'reboot'
		}
		if (data.machine.msgType == 4) {
			msgType = 'shutdown'
		}
		if (data.machine.msgType == 5) {
			msgType = 'update'
		}
		let info = {
			machine_id: data.machine.machine_id,
			msgType: msgType,
		}

		if (data.time == 2) {
			if (data.machine.time_point == '' || data.machine.time_point == null) {
				ElMessage({
					message: $t('message.pleaseTime'),
					type: 'error'
				})
				return
			} else {
				info.time_point = level.gettime(data.machine.time_point, 3)
			}
		}
		setControl(info)
	} else {
		let info = {
			machine_id: props.info.machine_id
		}
		// 音量、灯光
		if (data.machine.msgType == 6) {
			info.volume = data.machine.volume
			sound(info)
		} else {
			info.light = data.machine.light
			light(info)
		}
	}

}

// 1. 休眠：sleep, 2. 唤醒：wakeUp, 3. 重启：reboot, 4. 关机：shutdown, 5. 软件升级：update
let setControl = (e) => {
	sendMainControl(e).then(res => {
		if (res.state == 200) {
			ElMessage({
				message: $t('message.setSuccess'),
				type: 'success'
			})
			data.macstatus = false
			return
		}
		ElMessage({
			message: $t('message.networkFailed'),
			type: 'error'
		})
	}).catch(err => {
		ElMessage({
			message: err.msg,
			type: 'error'
		})
	})
}

// 音量
let sound = (e) => {
	setmachineVolume(e).then(res => {
		if (res.state == 200) {
			ElMessage({
				message: $t('message.setSuccess'),
				type: 'success'
			})
			data.macstatus = false
			return
		}
		ElMessage({
			message: $t('message.networkFailed'),
			type: 'error'
		})
	}).catch(err => {
		ElMessage({
			message: err.msg,
			type: 'error'
		})
	})
}

// 灯光
let light = (e) => {
	setmachineLight(e).then(res => {
		if (res.state == 200) {
			ElMessage({
				message: $t('message.setSuccess'),
				type: 'success'
			})
			data.macstatus = false
			return
		}
		ElMessage({
			message: $t('message.networkFailed'),
			type: 'error'
		})
	}).catch(err => {
		ElMessage({
			message: err.msg,
			type: 'error'
		})
	})
}

// 切换上一台/下一台设备
let macswitch = (e) => {
	let type = JSON.parse(decodeURI(route.query.l)).type || 'overview'
	let obj = {
		id: '',
		type: type
	}

	if (e == 1) {
		data.num -= 1
	} else {
		data.num += 1
	}

	obj.id = data.list[data.num].m_id
	let l = encodeURI(JSON.stringify(obj))
	route.query.l = l
	setmacnum()
	emit('onstatus')
}

// 获取设备列表信息
let getmachine = () => {
	let m_id = JSON.parse(decodeURI(route.query.l)).id
	getmachineList().then(res => {
		if (res.state == 200) {
			data.list = res.data
			for (let key in data.list) {
				if (data.list[key].m_id == m_id) {
					data.num = key * 1
				}
			}
			setmacnum()
		}
	})
}

// 是否为第一/最后一台
let setmacnum = () => {
	if (data.num == 0) {
		data.upper = true
	} else {
		data.upper = false
	}

	if (data.num == data.list.length - 1) {
		data.lower = true
	} else {
		data.lower = false
	}
}

// 前往设备
let gmac = () => {
	console.log(data.list)
	if (data.machine_id == '') {
		ElMessage({
			message: $t('message.pleaseEnterMachineCode'),
			type: 'error'
		})
		return
	}

	let type = JSON.parse(decodeURI(route.query.l)).type || 'overview'
	let obj = {
		id: '',
		type: type
	}

	for (let item of data.list) {
		if (item.machine_id == data.machine_id) {
			obj.id = item.m_id
		}
	}

	if (obj.id == '') {
		ElMessage({
			message: $t('message.unInfo'),
			type: 'error'
		})
		return
	}

	let l = encodeURI(JSON.stringify(obj))
	route.query.l = l
	data.machine_id = ''
	getmachine()
	emit('onstatus')

}

// 返回列表
let glist = () => {
	router.push({ path: '/machine/info' })
}

getmachine()

</script>
